<template>
    <el-row class="user-info-form" type="flex" justify="center">
        <el-col>
            <div class="add-new-node">
                <el-form label-width="150px" :model="maintainStandardNodeInfoForm" :rules="maintainStandardNodeInfoFormRules" ref="maintainStandardNodeInfoForm" @submit.native.prevent>
                    <el-form-item label="维保标准：">
                        <el-input v-model="maintenanceName" auto-complete="off" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="维保对象：" prop="maintenanceObjectId">
                        <tree-select
                            :disabled="isEdit"
                            filterable
                            v-model="maintainStandardNodeInfoForm.maintenanceObjectId"
                            :width="200"
                            :data="maintenanceObjectOptions"
                            :defaultProps="maintenanceObjectDefaultProps"
                            :checkedKeys="defaultCheckedCategoryId"
                            :nodeKey="typeNodeKey"
                            @node-click="handleNodeClick"
                            @popoverHide="objPopoverHide">
                        </tree-select>
                    </el-form-item>
                    <el-form-item label="维保类型：" prop="workType">
                        <el-radio-group v-model="maintainStandardNodeInfoForm.workType" :disabled="isEdit">
                            <el-radio v-for="item in maintenanceTypeOptions" :key="item.id" :label="item.id">{{item.name}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="维保周期：" prop="workPeriod">
                        <el-radio-group v-model="maintainStandardNodeInfoForm.workPeriod" :disabled="isEdit">
                            <el-radio v-for="item in maintenanceCycleOptions" :key="item.id" :label="item.id">{{item.name}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="作业标准：" prop="workStandard">
                        <el-input type="textarea" v-model="maintainStandardNodeInfoForm.workStandard" auto-complete="off" placeholder="请输入作业标准"></el-input>
                    </el-form-item>
                    <el-form-item label="作业内容：" prop="multiLineForm">
                        <!-- 作业内容多行表单 -->
                        <div class="multi-line-form" v-for="(item, index) in multiLineForm" :key="index">
                            <el-row>
                                <el-col :span="21">
                                    <span>作业内容-{{index+1}}</span>
                                </el-col>
                                <el-col :span="3">
                                    <el-button v-if="index == 0" type="primary" icon="el-icon-plus" @click="addMultiLineForm" circle></el-button>
                                    <el-button v-if="index != 0" type="danger" icon="el-icon-delete" @click="deleteMultiLineForm(index)" circle></el-button>
                                </el-col>
                            </el-row>
                            <el-select v-model="item.type" placeholder="请选择作业类型">
                                <el-option
                                    v-for="obj in workTypeOptions"
                                    :key="obj.id"
                                    :label="obj.name"
                                    :value="obj.id">
                                </el-option>
                            </el-select>
                            <el-input type="textarea" v-model="item.workContent" auto-complete="off" placeholder="请输入作业内容"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label-width="0" class="verifyidentity-button">
                        <el-button round @click.stop="closeDialogFun">取消</el-button>
                        <el-button type="primary" round @click="saveMaintainStandardInfo">保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import util from '@/utils/util'
import TreeSelect from '@/libs/TreeSelect/Main'
import { getAllMaintainStandard, updateMaintainStandardDetail } from '@/api/maintence'
import { getDictByCode } from '@/api/dic'

export default {
    name: 'MaintainStandardNodeInfoForm',
    components: {
        TreeSelect
    },
    props: {
        parentId: {
            required: true
        },
        oldInfo: {
            type: Object,
            default () {
                return {
                    id: ''
                }
            }
        },
        closeDialogFun: {
            type: Function,
            required: true
        }
    },
    data() {
        var checkMultiLineForm = (rule, value, callback) => {
            var multiLineForm = this.multiLineForm
            for(var i=0, len=multiLineForm.length; i < len; i++) {
                if(multiLineForm[i].type == '' && multiLineForm[i].workContent == '') {
                    callback(new Error('请填写作业内容'))
                }
            }

            callback()
        }
        return {
            firstLoad: true,
            isEdit: false,
            maintenanceName: '', // 维保标准名称
            maintenanceObject: {
                fireSystem: '',
                assetCategoryId: ''
            },
            maintenanceObjectOptions: [], // 维保对象下拉数据
            maintenanceObjectDefaultProps: {
                children: 'nodes',
                label: 'name',
                value: 'id'
            },
            typeNodeKey: 'id',
            defaultCheckedCategoryId: [],
            // 维保类型
            maintenanceTypeOptions: [
                {
                    id: 1,
                    name: '维保巡查' 
                }, {
                    id: 2,
                    name: '保养' 
                }, {
                    id: 3,
                    name: '单点测试'  
                }, {
                    id: 4,
                    name: '联动测试' 
                }
            ],
            // 维保周期
            maintenanceCycleOptions: [
                {
                    id: 1,
                    name: '月'
                }, {
                    id: 2,
                    name: '季度'
                }, {
                    id: 3,
                    name: '半年'
                }, {
                    id: 4,
                    name: '1年'
                }
            ],
            // 作业类型
            workTypeOptions: [
                {
                    id: 1,
                    name: '单选'
                }, {
                    id: 2,
                    name: '文本'
                }, {
                    id: 3,
                    name: '数值'
                }, {
                    id: 4,
                    name: '单选+文本'
                }, {
                    id: 5,
                    name: '单选+数值'
                }, {
                    id: 6,
                    name: '数值+文本'
                }
            ],
            maintainStandardNodeInfoForm: {
                maintenanceObjectId: '',
                workType: '', // 作业类型
                workPeriod: '', // 作业周期
                workStandard: '', // 作业标准
            },
            maintainStandardNodeInfoFormRules: {
                maintenanceObjectId: [
                    { required: true, message: '请选择维保对象', trigger: 'blur' }
                ],
                workType: [
                    { required: true, message: '请选择维保类型', trigger: 'change' }
                ],
                workPeriod: [
                    { required: true, message: '请选择维保周期', trigger: 'change' }
                ],
                workStandard: [
                    { required: true, message: '请输入作业标准', trigger: 'blur' }
                ],
                multiLineForm: [
                    { required: true, validator: checkMultiLineForm, trigger: 'change' }
                ]
            },
            multiLineForm: [{
                type: '',
                workContent: ''
            }]
        }
    },
    created() {
        let that = this
        // 获取维保对象
        getAllMaintainStandard({id: String(that.parentId).replace('bz-', '')}).then(res => {
            that.maintenanceName = res.data[0].name
            that.maintenanceObjectOptions = res.data[0].nodes
            that.$nextTick(() => {
                // 是否有历史数据
                if(that.oldInfo.id && that.oldInfo.id != '') {
                    for(var key in that.maintainStandardNodeInfoForm) {
                        if(key != 'maintenanceObjectId') {
                            that.maintainStandardNodeInfoForm[key] = that.oldInfo[key]
                        }
                    }
                    // 消防系统id和资产类别id回显
                    that.maintenanceObject.fireSystem = that.oldInfo.fireSystem
                    that.maintenanceObject.assetCategoryId = that.oldInfo.assetCategoryId
                    // 多行表单数据回显
                    that.multiLineForm = that.oldInfo.maintainStandardContent
                    that.maintainStandardNodeInfoForm.maintenanceObjectId = that.oldInfo.assetCategoryId || that.oldInfo.fireSystem
                    that.defaultCheckedCategoryId = String(that.oldInfo.assetCategoryId || that.oldInfo.fireSystem).split(',')
                    that.isEdit = true
                }
            })
        })
    },
    methods: {
        // 维保对象选择后分类处理系统和类别
        handleNodeClick(obj, node, item) {
            let that = this
            if(obj.id !== that.selectNodeId) {
                if(obj.type == 1) {
                    // 记录系统id和资产类别id
                    that.maintenanceObject.fireSystem = obj.id
                    that.maintenanceObject.assetCategoryId = ''
                } else {
                    // 记录系统id和资产类别id
                    that.maintenanceObject.fireSystem = node.parent.data.id || ''
                    that.maintenanceObject.assetCategoryId = obj.id
                }
            }
        },
        // 维保对象选择后分类处理系统和类别
        objPopoverHide(checkedIds, checkedData) {
            if(checkedIds && checkedIds !== this.maintainStandardNodeInfoForm.maintenanceObjectId) {
                // 选择了系统
                if(checkedData.type == 1) {
                    this.maintenanceTypeOptions = [
                        {
                            id: 4,
                            name: '联动测试' 
                        }
                    ]
                } else {
                    this.maintenanceTypeOptions = [
                        {
                            id: 1,
                            name: '维保巡查' 
                        }, {
                            id: 2,
                            name: '保养' 
                        }, {
                            id: 3,
                            name: '单点测试'  
                        }
                    ]
                }
            }
        },
        // 增加一行
        addMultiLineForm() {
            this.multiLineForm.push({
                type: '',
                workContent: ''
            })
        },
        // 删除一行
        deleteMultiLineForm(index) {
            this.multiLineForm.splice(index, 1)
        },
        // 保存维保标准节点信息
        saveMaintainStandardInfo() {
            let that = this
            that.$refs['maintainStandardNodeInfoForm'].validate((valid) => {
                if (valid) {
                    let parames = {
                        maintainStandardId: String(this.parentId).replace('bz-', ''),
                        workType: that.maintainStandardNodeInfoForm.workType,
                        workPeriod: that.maintainStandardNodeInfoForm.workPeriod,
                        workStandard: that.maintainStandardNodeInfoForm.workStandard,
                        fireSystem: that.maintenanceObject.fireSystem,
                        assetCategoryId: that.maintenanceObject.assetCategoryId,
                        workContent: JSON.stringify(that.multiLineForm)
                    }
                    that.oldInfo.id ? (parames.id = that.oldInfo.id) : ''
                    // 提交
                    updateMaintainStandardDetail(parames).then(res => {
                        if(res.status === 200) {
                            that.$message({
                                message: '保存成功！',
                                type: 'success'
                            })
                            that.closeDialogFun(true)
                        } else {
                            that.$message({
                                message: res.info,
                                type: 'warning'
                            })
                        }
                    })
                } else {
                    return false
                }
            })
        }
    }
}
</script>

<style lang="scss">
.add-new-node {
    .multi-line-form {
        .el-row,
        .el-select,
        .el-textarea {
            margin-bottom: 10px;
        }
    }
}
</style>
